<route-config>
  {
  layoutName:'full',
  meta:{
  auth: false
  }
  }
</route-config>
<template>
  <div class="page-module login-container backgroundCover flex width_100 height_100">
    <div class="login-panel" @keyup.enter="onSubmit">
      <div class="head-text align_center">
        <img src="./images/logo.jpg" style="height:118px;border-radius:6px;">
      </div>
      <el-form class="login-form" size="medium" :model="form" :rules="rules" ref="form">
         <el-form-item>
          <el-select v-model="form.UserType" placeholder="请选择" style="width:100%;">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="username">
          <el-input placeholder="请输入手机号" autofocus v-model="form.Phone" v-if="form.UserType == '1'"/>
          <el-input placeholder="请输入用户名" autofocus v-model="form.UserName" v-else/>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" placeholder="请输入密码" v-model="form.Password"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="width_100" @click="onSubmit" :loading="submitLoad">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="icp">粤ICP备19113190号</div>
  </div>
</template>
<script type="text/javascript">
import {mapActions} from 'vuex'
import {SET_USER_INFO} from 'src/store/actions/type'
// import {homePage} from 'src/common/setting'
import {cookieStorage} from 'src/common/storage'
export default {
  name: 'Login',
  data () {
    return {
      form: {
        UserName: null,
        Password: null,
        Phone:null,
        UserType: '2'
      },
      rules: {
        UserName: [{required: true, message: '请输入手机号！', trigger: 'blur'}],
        Password: [{required: true, message: '请输入账户密码！', trigger: 'blur'}]
      },
      submitLoad: false,
      options: [{
          value: '1',
          label: '店家'
        }, {
          value: '2',
          label: '管理员'
        }]
    }
  },
  methods: {
    ...mapActions({
      setUserInfo: SET_USER_INFO
    }),
    onSubmit () {
      const {$refs, $api, form, $message, $notify, setUserInfo, $router} = this
      if(form.UserType == '1'){
        if(!this.form.Phone){
          $message('请输入手机号')
          return false;
        }else{
          let myreg=/^[1][3,4,5,7,8][0-9]{9}$/;  
          if (!myreg.test(this.form.Phone)) {  
              $message('请输入有效的手机号');
              return false;
          }
        }
      }else{
        if(!this.form.UserName){
          $message('请输入用户名')
          return false;
        }
      }
      if(!this.form.Password){
          $message('请输入密码')
          return false;
      }
      $refs.form.validate(async (valid) => {
        if (!valid) return false
        this.submitLoad = true

        try {
          const {Data, Message} = await $api.user.login(form)
          cookieStorage.set('authorization', Data);
          const rs = await $api.user.getUserInfo();
          console.log(rs)
          //this.getUserInfo()
           let datas = {name: rs.Data.UserName, avatar: rs.Data.HeadUrl, Phone: rs.Data.Phone, UserType: rs.Data.UserType}
          setUserInfo(datas)
          $message.success('登录成功')
          $router.replace('/home')
         
        } catch ({type}) {
          // type === 'business' && $notify.info({
          //   title: '温馨提示',
          //   message: '账号和密码都为：admin'
          // })
        } finally {
          this.submitLoad = false
        }
      })
    },
    getUserInfo(){
      this.$api.user.getUserInfo().then((rs) => {
        console.log(rs)
        const {setUserInfo} = this
        if(rs.IsSuccess){
          let datas = {name: rs.UserName, avatar: rs.HeadUrl, Phone: rs.Phone, UserType: rs.UserType}
          setUserInfo(datas)
          $message.success('登录成功')
          $router.replace('/home')
        }
      }).catch((res) =>{})
    }
  }
}
</script>
<style lang="scss" type="text/scss" rel="stylesheet/scss">
  .login-container {
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    background-image: url(./images/login_body.jpg);

    .login-panel {
      padding: 25px 15px;
      width: 350px;
      border-radius: 3px;
      background-color: #fff;
    }

    .head-text {
      margin-bottom: 25px;
    }
    
    .icp {
      position: absolute;
      bottom:10px;
      color: #333;
      font-size:14px;
    }
  }
</style>
